@import "ui-variables";

@tab-top-padding: 5px;
@tab-bottom-border-height: 5px;
@tab-padding-sides: 6px;
@tab-border: 1px solid @base-border-color;
@tab-bar-inset-box-shadow: inset 0 -2px 2px -2px rgba(0, 0, 0, 0.15);

// “Modified” icon
@dimensions-modified-icon: 6px;
@top-modified-icon: 9px;
@left-modified-icon: 12px;

// “Close” icon
@dimensions-close-icon: 18px;
@padding-top-close-icon: 3px;

.tab-bar {
  background: linear-gradient(
    to top,
    darken(@tab-bar-background-color, 10%),
    darken(@tab-bar-background-color, 20%)
  );
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: @tab-bar-inset-box-shadow;
  z-index: 1;
  border-radius: 0;

  &:empty {
    display: none;
  }

  &::-webkit-scrollbar {
    display: none;
  }
} // tab-bar

.tab-bar .tab {
  position: relative;
  font-size: @font-size;
  text-align: center;
  background-color: @tab-background-color;
  box-shadow: @tab-bar-inset-box-shadow;
  border-right: 1px solid @tab-bar-border-color;
  line-height: @tab-height;
  color: @tab-text-color;
  padding: 0 0 0 @tab-padding-sides;
  margin: 0;
  max-width: 100%;

  &:hover {
    background-color: @tab-background-color-hover;
  }

  &:last-child {
    border-right: none;
  }
}

// Style only for the file tabs, not the docks.
[location="center"].tab-bar .tab {
  flex: none;
  padding: 0 (@component-padding * 2);
  min-width: 140px;

  .native-ui-autoResizeTabs & {
    flex: 1;
    flex-grow: 1;
    transition: max-width 0.35s cubic-bezier(0.785, 0.135, 0.150, 0.860); // resize tabs with animation
  }
}

.tab:hover .title,
.tab.modified .title {
  -webkit-mask: linear-gradient(to right, transparent, black 1.125em) no-repeat;
  -webkit-mask-position: 0.4em 0;
}

// Active tab
.tab-bar .tab.active {
  flex: 1;
  color: @text-color-highlight;
  background: linear-gradient(
    to top,
    @tab-background-color-active,
    lighten(@tab-background-color-active, 6%)
  );
}

// Style only for the file tabs, not the docks.
[location="center"].tab-bar .tab.active {
  flex: none;

  // User settings
  .native-ui-autoResizeTabs & {
    flex: 1;
  }
}

.tab-bar .tab.active .title {
  padding-right: 0; // otherwise the title jumps when it’s the active tab
}

.tab-bar .tab .close-icon {
  display: none;
  z-index: 3;
  height: @dimensions-close-icon;
  width: @dimensions-close-icon;
  color: @text-color !important;
  border-radius: 2px;
  text-align: left;

  &:hover,
  &:active {
    background: @background-close-button-hover;
  }

  &:before { // the close icon itself
    content: "✕";
    position: relative;
    top: -3px;
    width: 100%;
    text-align: center;
  }
} // .close-icon

// Change the modified icon to a black bullet
.tab-bar .tab.modified:not(:hover) .close-icon {
  border: none;
  background-color: @text-color;
}

// Display close icon only when the tab is hovered
.tab-bar .tab:hover .close-icon,
.tab-bar .tab.modified:hover .close-icon { // Display close icon when modified icon is hovered
  display: inline-block;
  top: @padding-top-close-icon;
  left: @tab-padding-sides;
  width: @dimensions-close-icon;
  height: @dimensions-close-icon;
}

// display modified indicator in the tab when not hovered
.tab-bar .tab.modified:not(:hover) {
  .close-icon {
    display: inline-block;
    top: @top-modified-icon;
    left: @left-modified-icon;
    width: @dimensions-modified-icon;
    height: @dimensions-modified-icon;
  }
}
